<template>
  <div id="container">
    <!--图表容器-->
    <div id="SalesAmount"></div>
  </div>
</template>
  
<script>
export default {
  name: "SalesAmount",
  props: {
    salesTime: {
      type: Array,
      required: true, // 根据需要，可以设置这个属性为必需的
      default: () => [], // 如果父组件没有传递数组，提供一个默认空数组
    },
    totalPrice: {
      type: Array,
      required: true, // 根据需要，你可以设置这个属性为必需的
      default: () => [], // 如果父组件没有传递数组，提供一个默认空数组
    },
  },
  data() {
    return {
      // formatter: "${value}",
      salesTime1: [],
      totalPrice1: [],
      chart: null,
    };
  },
  watch: {
    salesTime(newVal) {
      console.log("salesTime updated:", newVal);
      // 在这里处理salesTime更新后的逻辑
      this.salesTime1 = newVal;
      this.chart.dispose();
      this.chart = null;
      this.showCharts();
    },
    totalPrice(newVal) {
      console.log("totalPrice updated:", newVal);
      //   console.log(this.chart)
      // 在这里处理totalPrice更新后的逻辑
      this.totalPrice1 = newVal;
      this.chart.dispose();
      this.chart = null;
      this.showCharts();
    },
  },
  mounted() {
    this.showCharts();
  },
  methods: {
    // 初始化柱状图-------------------
    showCharts() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("SalesAmount")); //也可以通过$refs.newCharts的方式去获取到dom实例。
      // 绘制图表
      myChart.setOption({
        title: { text: "销售额情况", left: "center" }, //图标的标题
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          //   left: "3%",
          //   right: "4%",
          //   bottom: "3%",
          //   containLabel: true,
        },
        xAxis: [
          {
            name: "时间",
            type: "category",
            data: this.salesTime1, //横坐标书籍名称
            axisLabel: {
              formatter: function (value) {
                // console.log(index);
                var maxWidth = 5; // 假设的最大宽度（字符数）
                var words = value.split(""); // 将文本拆分成单个字符数组
                var lines = []; // 存储每行的文本
                var currentLine = ""; // 当前行的文本

                for (var i = 0; i < words.length; i++) {
                  var word = words[i];
                  //   var wordWidth = 1; // 假设每个字符宽度为1（实际中可能需要更精确的测量）
                  if (
                    currentLine &&
                    currentLine.length + word.length > maxWidth
                  ) {
                    lines.push(currentLine);
                    currentLine = word;
                  } else {
                    currentLine += word;
                  }
                }
                lines.push(currentLine); // 添加最后一行
                return lines.join("\n"); // 使用换行符连接各行文本
              },
            },
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "销售金额/元",
          },
        ],
        series: [
          {
            name: "销售金额",
            type: "bar",
            barWidth: "60%",
            data: this.totalPrice1, //
          },
        ],
      });
      this.chart = myChart; //保存echarts实例
    },
    // 初始化柱状图结束-------------------
  },
};
</script>
  
<style lang="scss" scoped>
#container {
  #SalesAmount {
    margin: 0 auto;
    width: 1200px;
    height: 600px;
  }
}
</style>
  
  